<template>
	<div class="registerContainer">
		<NewsHeader 
			:isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder" 
			:aimUrl = 'dataArr.aimUrl'
			:rightUrl='dataArr.rightUrl'
		/>
		<div class="registerCont">
			<div class="contDetail">
				<p>
					<input type="text" placeholder="请输入11位手机号码" v-model='phonenumber'>
					<span>验证码</span>
				</p>
				<p>
					<input type="text" placeholder="请输入手机验证码" v-model='checkcode'>
				</p>
				<p>
					<input type="password" placeholder="请输入6-12位密码" v-model='password'>
					<img src="../../assets/images/mine/icon_chakan@2x.png" alt="">
				</p>
			</div>
			<p class="registerButtom">
				<span>点击“注册”代表您已经阅读并同意用户使用协议</span>
				<span @click='register'>注册</span>
			</p>
		</div>
	</div>
</template>
<script>
	import NewsHeader from '../../components/shopheader'

	export default{
		name:'register',
		components:{
			NewsHeader,
		},
		data(){
			return{
					phonenumber:'',
					checkcode:'',
					password:'',
					dataArr:{
						isInput:false,
						iconArr:[
							{
								iconLeft:"icon-zuojiantou",
								iconRight:""
							}
						],
						placeholder:"注册",
						aimUrl:'/mine/login',
						rightUrl:''
					}
			}
		},
		methods:{
			register(){
				if(this.phonenumber.length!=0&&this.password.length!=0){
					if((/^1[34578]\d{9}$/.test(this.phonenumber))){
						if(this.password.length>=6&&this.password.length<=12){
							// console.log(this.phonenumber,this.password)
							var curdata = {
								'phonenumber':this.phonenumber,
								'password':this.password
							}
							const url = this.HOST + '/register'
							this.$axios.post(url,curdata)
							.then(res => {
		                		// console.log(res.data)
		                		if(res.data.code == '1'){
		                			alert("注册成功，请登录")
		                			setTimeout(function(){
                      					this.$router.push('/mine/login')
                  					}.bind(this),1000)
		                		}else if(res.data.code == '0'){
		                			alert(res.data.msg)
		                		}else{
		                			alert(res.data.msg)
		                		}
		                	})
		                	.catch(error => {
		                		console.log(error)
		                	})
						}else{
							console.log('密码长度在6-12位')
						}
					}else {
						console.log('请填写正确手机号')
					}
				}else {
					console.log('密码或手机号不为空！')
				}
			}
		}
	}
</script>
<style scoped lang='less'>
.registerContainer{
	width: 100%;
	min-height: 1334 / 100rem;
	padding-top: 88 / 100rem;
	box-sizing: border-box;
	background-color: #fff;
	.registerCont{
		padding-top: 20 / 100rem;
		padding-left: 20 / 100rem;
		padding-right: 20 / 100rem;
		box-sizing: border-box;
		.contDetail{
			width: 100%;
			height: 366 / 100rem;
			box-shadow: 0 0 10 / 100rem 10 / 100rem #f3f3f3;
			p{	
				width: 710 / 100rem;
				height: 117 / 100rem;
				border-bottom: 3px solid #ededed;
				border-radius: 8 / 100rem;
				position: relative;
				input{
					width: 710 / 100rem;
					height: 117 / 100rem;
					border-radius: 8 / 100rem;
					border: none;
					text-indent: 20 / 100rem;
					outline: none;
				}
				span{
					width: 90 / 100rem;
					height: 44 / 100rem;
					border-radius: 8 / 100rem;
					background-color: #ff5555;
					color: #fff;
					font-size: 26 / 100rem;
					font-weight: 600;
					text-align: center;
					line-height: 44 / 100rem;
					position: absolute;
					top:40 / 100rem;
					right: 20 / 100rem;
				}
				img{
					width: 57 / 100rem;
					height: 32 / 100rem;
					position: absolute;
					top:44 / 100rem;
					right: 19 / 100rem;
				}
			}
		}
		.registerButtom{
			margin-top: 26 / 100rem;
			span:nth-child(1){
				display: inline-block;
				font-size: 30 / 100rem;
				color: rgba(0, 0, 0, 0.8);
				margin-left: 20 / 100rem;
				margin-bottom: 26 / 100rem;
			}
			span:nth-child(2){
				display: block;
				width: 670 / 100rem;
				height: 88 / 100rem;
				background-color: #ff5555;
				color: #fff;
				font-size: 40 / 100rem;
				font-weight: 500;
				line-height: 88 / 100rem;
				text-align: center;
				border-radius: 8 / 100rem;
				margin-left: 20 / 100rem;
			}
		}
	}

}
</style>